<template>
	<div>
		
		<el-form label-position="right" label-width="80px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
			<el-form-item label="用户名" prop="email">
				<el-input type="text" v-model="ruleForm.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" show-password></el-input>
			</el-form-item>
			<!-- <el-form-item label="验证码" prop="verifyCode">
				<el-input style="width: 60%;" type="verifyCode" v-model="ruleForm.verifyCode" autocomplete="off" placeholder="验证码"></el-input>
				<el-button style="width: 40%;" :disabled="verifyDisabled" @click="getVerifyCode">获取验证码</el-button>
			</el-form-item> -->
			<el-form-item style="margin-top: 40px;">
				<el-button style="width: 100%;" type="primary" @click="signin('ruleForm')">确认登录</el-button>
				<el-checkbox v-model="rememberPass">记住密码</el-checkbox>
			</el-form-item>
		</el-form>
		<div class="signin-footer">
			<text @click="signup" style="color:#409EFF;" title="注册">注册</text>
			<text @click="findBackPass" title="忘记密码">忘记密码?</text>
		</div>
	</div>
</template>

<script>
	import {mapMutations} from "vuex"
	export default {
		data() {
			let validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) {
					callback(new Error('密码格式为(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)'));
				} else {
					callback();
				}
			};
			return {
				verifyDisabled:true,
				rememberPass:false,
				ruleForm: {
					password: '',
					email: ''
				},
				rules: {
					password: [{
						required: true,
						validator: validatePass,
						trigger: ['blur', 'change']
					}],
					// verifyCode:[
					// 	{
					// 		required: true,
					// 		message: '请输入验证码',
					// 		trigger: 'blur'
					// 	}
					// ],
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					]
				}
			};
		},
		computed:{
			
		},
		methods: {
			...mapMutations(['login']),
			signup() {
				this.$router.push('/users/signup')
			},
			findBackPass(){
				this.$router.push('/users/modifi_pass?type=findBack')
			},
			getVerifyCode(){  //获取验证码
				
			},
			signin(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						let res = await this.$network({
							api:"signin",
							data:{
								password:this.ruleForm.password,
								email:this.ruleForm.email
							}
						})
						if(res.status === 1){
							this.login({
								token:res.token,
								email:this.ruleForm.email,
								relevanceUserID:res.relevanceUserID
							})
							this.$router.push('/')
						}
						
						this.ruleForm.password = this.ruleForm.email = "";
					} else {
						this.$message({
							message: '请输入正确的用户名或密码',
							showClose:true,
							type: 'warning'
						});
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.signin-footer{
		cursor: pointer;
		font-weight: bold;
		text-align: right;
		font-size: $uni-font-size-extra-sm;
		color: $uni-color-error;
		text{
			margin-right: 20px;
		}
	}
</style>
